<template>
    <div id="course-show">
        <div class="screen-wraper">
            <ul class="screen-tab-wraper">
                <li
                    v-for="item in tabList" :key="item.id"
                    :class="acId == item.id ? 'tab-on' : ''"
                    @click="tabFn(item.id)"
                >
                    {{ item.name }}({{ item.num }})
                </li>
            </ul>
            <div class="screen-search-wraper">
                <el-input
                    v-model="courseName"
                    placeholder="请输入内容"
                    class="input-with-select"
                >
                    <el-button
                        slot="append"
                        icon="el-icon-search"
                        @click="getCourseTabListFn(preseted)"
                    />
                </el-input>
            </div>
        </div>
        <div class="topcoumt" style="margin: 0 70px">
            <div class="student-index-list">
                <el-row :gutter="70">
                    <el-col v-if="preseted" :span="6" style=" padding-right:25px; padding-left:25px">
                        <div class="add" @click="add">
                            <i class="iconfont icon-jiahao "></i>
                            <p >添加课程</p>
                        </div>
                    </el-col>
                    <el-col :span="6"  v-for=" (item ,index) in courseLists" :key="index"  style="position:relative; padding-right:25px; padding-left:25px">
                        <div class="grid-content" :class="{bc2:index%2===0,bc:index%2===1}"  @mouseenter="hoverImg(item,index)"  @mouseleave="leaveImg(item,index)" >
                            <img :src="item.iconPath"/>
                            <template v-if="preseted">
                                <div class="maskIn2"  @click.stop="detailFn(item.id,item.name)"></div>
                                <i class="iconfont icon-Group-" @click.stop="deleteFn(item.id)"></i>
                                <!-- 没有文件 -->
                                <img src="../../../assets/images/box.png" class="upload" title="文件打包"  @click.stop="uploadFile(item.id)" v-if='ishow == index && item.fileName==undefined'/>
                                <!-- 有文件 -->
                                <!-- 二期需求新增下载 -->
                                <img src="../../../assets/images/download.png" class="download" @click.stop="download(item.fileName,item.remark)" v-if="item.fileName && fileFlag == index" title="下载" />
                                <img src="../../../assets/images/file.png" class="fileNomal" v-if="item.fileName  &&  fileFlag != index"  />
                                <img src="../../../assets/images/files.png" class="fileName"  v-if="item.fileName  &&  fileFlag == index" title="文件已存在"  />
                                <!-- <img src="../../../assets/images/delete.png" class="delete" @click.stop="deleteFile(item.id)" v-if="item.fileName  &&  fileFlag == index" title="删除"  /> -->
                                <img src="../../../assets/images/box.png" @click.stop="uploadFile2(item.id)" class="upload" v-if='item.fileName &&  fileFlag == index'   title="重新打包" />
                            </template>
                            <span
                                v-else
                                class="preseted-btn"
                                @click="setPresetedFn(item)"
                            >
                                <img src="../../../assets/images/icon/icon1.png" >
                                升级为预置
                            </span>
                        </div>
                        <p class="title">{{item.name}}</p>
                        <p
                            v-if="!preseted"
                            class="teachName"
                        >
                            {{ item.teacherName }}
                        </p>
                    </el-col>

                    <div
                        class="no-info"
                        v-if="!preseted && !courseLists.length"
                    >
                        <img src="../../../assets/images/icon/icon-noinfo.png" alt="">
                        <p>暂无数据</p>
                    </div>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
    import { getCourseTabApi, getCoursePresetedListApi, getCourseTeachPresetedListApi, setPresetApi } from '../../../api/resourceCreate';
    export default {
        data() {
            return {
                list:[],
                setCourseId:'',
                //课程列表
                courseLists: [],
                //没有文件
                ishow:null,
                //上传后显示文件
                fileFlag:null,
                tabList: [],
                acId: 0,
                preseted: true,
                courseName: '',
                dialogVisible: false,
            }
        },
        watch: {
            '$route': 'routeFn',
        },
        created () {
             // 初始化清空
            this.$localstorage.removeLocalStorage('setCourseId','')
            this.$localstorage.removeLocalStorage('CourseTitle','')
            this.routeFn();
        },
        methods:{
            init() {
                getCourseTabApi({
                    preseted: this.preseted,
                }).then((res) => {
                    this.tabList = res.data;
                });

                this.getCourseTabListFn(this.preseted);
            },
            setPresetedFn(item) {
                const { id } = item;
                this.$confirm('升级为预置课程，该课程下的所有班级及教学记录将被删除，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    setPresetApi({
                        id,
                    }).then(() => {
                        this.$message.success('设置成功');
                        this.init();
                    });
                });
            },
            routeFn() {
                const { tab } = this.$route.query;
                this.acId = 0;
                this.preseted = (tab == 1 || !tab) ? true : false;
                this.init();
            },
            tabFn(id) {
                this.acId = id;
                this.getCourseTabListFn(this.preseted);
            },
            getCourseTabListFn(type) {
                if (type) {
                    getCoursePresetedListApi({
                        courseName: this.courseName,
                        directionId: this.acId,
                    }).then(res => {
                        this.courseLists = res.data || [];
                    });
                } else {
                    getCourseTeachPresetedListApi({
                        courseName: this.courseName,
                        directionId: this.acId,
                    }).then(res => {
                        this.courseLists = res.data || [];
                    });
                }
            },
            //删除方法  // 没有测试等 写完班级
            commonFn(id){
                let self = this
                self.$confirm('课程被其他教师占用并含有学生,确定删除么？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    self.$http.delete('/tes/course/'+id+'?errorDealFlag=true') .then((response) => {
                        let res = response.data
                        if(res.code == '200') {
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            self.init()
                        }
                    })
                })
            },
            //删除
            deleteFn(id){
                let self = this
                self.$confirm('确定删除么？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(() => {
                    const loading = this.$loading({
                        lock: true,
                        text: "正在删除中...",
                        spinner: "el-icon-loading",
                        background: "rgba(0, 0, 0, 0.7)"
                    });
                self.$http.delete('/tes/course/'+id+'?errorDealFlag=') .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                         self.$message({
                            message: '删除成功',
                            type: 'success'
                         })
                         self.init()
                         loading.close()
                    }else if(res.code == '501'){
                        this.commonFn(id)
                        loading.close()
                    } else{
                        self.$message.error(res.message)
                        loading.close()
                    }
                }).catch(err => {
                     console.log(err)
                     loading.close()
                    })
			    })
            },
            add(){
                this.$router.push({ path: '/Admin/CreativeCourse/CourseBaseInfo' })
            },
            //详情
            detailFn(id,name){
                this.$localstorage.putLocalStorage('setCourseId', id) //设置值
                this.$localstorage.putLocalStorage('CourseTitle', name)
                 this.$router.push({
                    path: '/Admin/CreativeCourse/CourseBaseInfo',
                })
            },
            //删除上传文件
            deleteFile(id){
                let self =this
                self.$confirm('确定删除文件?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(() => {
                self.$http.post('/tes/course/'+id+'/preset-resource').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        self.init()
                    }else{
                        self.$message.error(res.message)
                    }
                 })
                })
            },
            //鼠标经过文件上传
            uploadFile(id){
                let self =this

                const loading = this.$loading({
                    lock: true,
                    text: '文件打包中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                 })

                this.$http.post('/tes/course/'+id+'/preset-resource').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        this.$message({
                            message: '打包成功',
                            type: 'success'
                        })
                        loading.close()
                        self.init()
                    }else{
                        loading.close()
                        self.$message.error(res.message)
                    }
                 })

                // $event.stopPropagation();//原生阻止冒泡事件

                // let fileType = $event.target.files[0].name
                // fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length) //取得后缀名
                // let fileSize =  $event.target.files[0].size //上传文件大小B
                // let size = fileSize /1024/1024  //得到mb
                // //console.log(size,1048576)
                // if(fileType.toLowerCase() != "zip" && fileType.toLowerCase() != "rar"){
                //     self.$message.error('请上传zip格式或者rar格式文件')
                //     return
                // }else if(size>1048576){
                //     this.$message.error('文件不能大于2GB,请重新选择！')
                //     return
                // }
                //  const loading = this.$loading({
                //     lock: true,
                //     text: '文件上传中...',
                //     spinner: 'el-icon-loading',
                //     background: 'rgba(0, 0, 0, 0.7)'
                //  })
                //  let formData = new FormData();

                //  formData.append('file', $event.target.files[0]);

                //  this.$http.post('/tes/course/'+id+'/preset-resource', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
                //     let res = response.data
                //     if(res.code == '200') {
                //         this.$message({
                //             message: '上传成功',
                //             type: 'success'
                //         })
                //         loading.close()
                //         $event.target.value=''
                //         self.init()
                //     }else{
                //         loading.close()
                //         $event.target.value=''
                //         self.$message.error(res.message)
                //     }
                //  })
            },
            uploadFile2(id){
                //this.uploadFile(id,$event)
                this.uploadFile(id)

            },
            //鼠标经过变色
            hoverImg(item,index){
               // item.iconPath=item.iconPath+'.fan.png'
               //1 没有文件  2有文件
                if(item.fileName==undefined){ //没有文件时候
                   this.ishow = index
                }else{
                    this.ishow =null
                    this.fileFlag =index
                }

            },
            //鼠标离开变色
            leaveImg(item,index){
                if(item.fileName==undefined){ //没有文件时候
                   this.ishow =null
                }else{
                    this.fileFlag =null
                }
               // item.iconPath=item.iconPath.substr(item.iconPath,item.iconPath.lastIndexOf('.', item.iconPath.lastIndexOf('.') - 1) );
               //1 $('.upload').hide()
            },

            // 二期需求
            // 下载
            download(fileName,remark){

                let self = this
                self.$http.post('/tes/course/preset-resource/download/permission',{
                    remark: remark,
                    fileName: fileName
                }) .then((response) => {
                    let res = response.data
                    if(res.code == '200'){
                        self.token=res.data
                        let downloadElement = document.createElement('a');
                        downloadElement.style.display = 'none';
                        downloadElement.href = '/tes/course/preset-resource/download?token='+self.token
                        downloadElement.download = self.versionVideo; //下载后文件名
                        downloadElement.click(); //点击下载
                        //document.body.removeChild(downloadElement); //下载完成移除元素
                    }else{
                        self.$message.error(res.message)
                    }
                })
            }
        }
    }
</script>
<style scoped>
 .bc {
    background:url('../../../assets/images/bgcolor.png') no-repeat;
    width: 230px;
    border-radius: 6px;
    height: 125px;
    position: relative;

}
.bc2 {
    background:url('../../../assets/images/bgcolor2.png') no-repeat;
    width: 230px;
    border-radius: 6px;
    height: 125px;
    position: relative;
}
</style>
<style lang="scss">
.screen-wraper {
    padding: 0 60px 40px;
    .screen-tab-wraper {
        display: flex;
        flex-wrap: wrap;
        color: #000;
        li {
            cursor: pointer;
            line-height: 30px;
            margin-right: 30px;
            &:hover {
                color: #385899;
            }
        }

        .tab-on {
            color: #385899;
        }
    }
    .screen-search-wraper {
        margin-top: 20px;
        text-align: left;
        .input-with-select {
            width: 450px;
            .el-input__inner {
                width: 100% !important;
            }
        }
    }
}

.dialog-save {
    p {
        text-align: center;
    }
    .save{
        margin: 0px auto;
        width: 200px;
        clear: both;
        margin-top: 20px;
    }
}
</style>
<style lang="scss" scoped>
 @import "./../../../styles/layout/color_variables";
  #course-show {
    width: $width;
    margin: 50px auto;
    color: #727272;
    .preseted-btn {
        position: absolute;
        right: 10px;
        bottom: 10px;
        color: #fff;
        font-size: 12px;
        height: 20px;
        line-height: 20px;
        border-radius: 10px;
        padding: 0 10px;
        background: rgba($color: #000000, $alpha: 0.5);
        &:hover {
            background: #1277eb;
        }
        img {
            height: 11px;
        }
    }
    .student-index-list{
        .el-row {
            margin-bottom: 20px;
            .no-info {
                text-align: center;
                padding: 100px 20px 20px;
                img {
                    width: 450px;
                    margin-bottom: 20px;
                }
                p {
                    font-size: 18px;
                }

            }
            .add{
              border: 1px dashed #999;
              height: 127px;
              text-align:center;
              border-radius: 6px;
              color: #999;
              font-size: 14px;
              background: #fff;
              cursor: pointer;
                i{
                    display: inline-block;
                    margin-top: 54px
                }

                &:hover{
                    border: 1px dashed #1277eb;
                   // transform: scale(1.05);
                   // transition: transform .3s;
                    cursor: pointer;
                   // box-shadow: 0 0 20px #e0e0e0;
                   color: #1277eb
                }
            }
            .el-col {
                border-radius: 4px;
                margin-bottom: 20px;

                &>.grid-content{
                   // background: #495172;
                    //background:url('../../../assets/images/bgcolor.png') no-repeat;
                   // width: 230px;
                   // border-radius: 6px;
                   // height: 130px;
                    //position: relative;
                    &>img{
                        width: 180px;
                        // height: 90px;
                        margin: 0 auto;
                        padding-top: 14px;
                        display: block
                    }

                    .icon-Group-{
                         color: #fff;
                         font-size: 20px;
                         position: absolute;
                         right:12px;
                         top: 15px;
                         cursor: pointer;
                         width: 20px;
                         height: 20px;
                         z-index: 8;
                    }
                    .fileInput{
                        position: absolute;
                        left: 14px;
                        bottom: 14px;
                        width: 25px;
                        height: 25px;
                        display: inline-block;
                        opacity: 0;
                        z-index: 999;

                    }
                    .fileInput2{
                        position: absolute;
                        left: 14px;
                        bottom: 14px;
                        width: 25px;
                        height: 25px;
                        display: inline-block;
                        opacity: 0;
                        z-index: 999;
                        cursor: pointer;

                    }
                    .maskIn2{
                        background: #000;
                        position: absolute;
                        left: 0px;
                        top: 0;
                        width: 230px;
                        height: 126px;
                        opacity: .2;
                        border-radius: 5px;
                        display: none
                    }
                    //下载图标
                    .upload{
                        position: absolute;
                        left: 10px;
                        bottom: 14px;
                        width: 25px;
                        height: 25px;
                        z-index: 999;
                        display: block;
                       // display: none;
                    }
                    //文件
                    .fileName{
                        position: absolute;
                        left: 70px;
                        bottom: 14px;
                        width: 25px;
                        height: 25px;
                        //display: none;
                    }
                    //删除图标
                    .delete{
                        position: absolute;
                        left: 100px;
                        bottom: 14px;
                        width: 25px;
                        height: 25px;
                       // display: none;
                    }
                    //文件上传完毕
                    .fileNomal{
                        position: absolute;
                        left: 10px;
                        bottom: 14px;
                        width: 25px;
                        height: 25px;
                       // display: none;
                    }
                    // 下载
                    .download{
                        position: absolute;
                        left: 40px;
                        bottom: 14px;
                        width: 25px;
                        height: 25px;
                    }
                    &:hover{
                        .maskIn2{
                            display: block
                        }
                        .icon-Group-{
                            opacity: .6;
                        }
                       //  box-shadow: 0 0 20px #aeaeae;
                        // transform: scale(1.05);
                        // transition: transform .3s;
                        cursor: pointer;
                        img{
                            transform: scale(1.05);
                            transition: transform .6s;
                        }
                    }

                }

                &>.title{
                    text-align: center;
                    padding: 15px 0;
                    font-size: 16px;
                    color: #323232;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .teachName {
                    color: #888888;
                    font-size: 12px;
                    text-align: center;
                }
            }
        }
    }
    .iconcase{
        margin-left: 20px;
    }
  }
</style>
